<template>
  <div class="app-container beauty-container home">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="beauty-statistics-row">
      <!-- 用户统计 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="beauty-statistics-card" shadow="hover">
          <div class="beauty-statistics-content">
            <div class="beauty-statistics-icon user-icon">
              <el-icon :size="40"><User /></el-icon>
            </div>
            <div class="beauty-statistics-data">
              <div class="beauty-statistics-value primary">{{ statistics.userStatistics?.totalUsers || 0 }}</div>
              <div class="beauty-statistics-label">用户总数</div>
              <div class="beauty-statistics-detail">
                <span>今日新增: {{ statistics.userStatistics?.todayNewUsers || 0 }}</span>
                <span>本月新增: {{ statistics.userStatistics?.monthNewUsers || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 订单统计 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="beauty-statistics-card" shadow="hover">
          <div class="beauty-statistics-content">
            <div class="beauty-statistics-icon success-icon">
              <el-icon :size="40"><Document /></el-icon>
            </div>
            <div class="beauty-statistics-data">
              <div class="beauty-statistics-value success">{{ statistics.orderStatistics?.totalOrders || 0 }}</div>
              <div class="beauty-statistics-label">订单总数</div>
              <div class="beauty-statistics-detail">
                <span>今日: {{ statistics.orderStatistics?.todayOrders || 0 }}</span>
                <span>本月: {{ statistics.orderStatistics?.monthOrders || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 交易金额统计 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="beauty-statistics-card" shadow="hover">
          <div class="beauty-statistics-content">
            <div class="beauty-statistics-icon warning-icon">
              <el-icon :size="40"><Money /></el-icon>
            </div>
            <div class="beauty-statistics-data">
              <div class="beauty-statistics-value warning">{{ formatAmount(statistics.amountStatistics?.totalAmount) }}</div>
              <div class="beauty-statistics-label">累计交易额</div>
              <div class="beauty-statistics-detail">
                <span>今日: {{ formatAmount(statistics.amountStatistics?.todayAmount) }}</span>
                <span>本月: {{ formatAmount(statistics.amountStatistics?.monthAmount) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 还款统计 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="beauty-statistics-card" shadow="hover">
          <div class="beauty-statistics-content">
            <div class="beauty-statistics-icon danger-icon">
              <el-icon :size="40"><WalletFilled /></el-icon>
            </div>
            <div class="beauty-statistics-data">
              <div class="beauty-statistics-value danger">{{ formatAmount(statistics.repaymentStatistics?.totalUnpaidAmount) }}</div>
              <div class="beauty-statistics-label">待还金额</div>
              <div class="beauty-statistics-detail">
                <span>已还: {{ formatAmount(statistics.repaymentStatistics?.totalPaidAmount) }}</span>
                <span>逾期: {{ statistics.repaymentStatistics?.overdueOrders || 0 }}单</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单状态和还款概览 -->
    <el-row :gutter="20" class="mt-4">
      <!-- 订单状态 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card class="beauty-card" shadow="never">
          <template #header>
            <div class="beauty-card-header">
              <span class="beauty-card-title">订单状态</span>
            </div>
          </template>
          <div class="beauty-status-list">
            <div class="beauty-status-item">
              <span class="status-label">待审核</span>
              <span class="status-value warning">{{ statistics.orderStatistics?.pendingOrders || 0 }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">还款中</span>
              <span class="status-value primary">{{ statistics.orderStatistics?.ongoingOrders || 0 }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">已完成</span>
              <span class="status-value success">{{ statistics.orderStatistics?.completedOrders || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 还款概览 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card class="beauty-card" shadow="never">
          <template #header>
            <div class="beauty-card-header">
              <span class="beauty-card-title">本月还款</span>
            </div>
          </template>
          <div class="beauty-status-list">
            <div class="beauty-status-item">
              <span class="status-label">应还金额</span>
              <span class="status-value">{{ formatAmount(statistics.repaymentStatistics?.monthDueAmount) }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">已还金额</span>
              <span class="status-value success">{{ formatAmount(statistics.repaymentStatistics?.monthPaidAmount) }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">逾期金额</span>
              <span class="status-value danger">{{ formatAmount(statistics.repaymentStatistics?.overdueAmount) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 用户认证 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card class="beauty-card" shadow="never">
          <template #header>
            <div class="beauty-card-header">
              <span class="beauty-card-title">用户认证</span>
            </div>
          </template>
          <div class="beauty-status-list">
            <div class="beauty-status-item">
              <span class="status-label">实名用户</span>
              <span class="status-value">{{ statistics.userStatistics?.authUsers || 0 }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">认证率</span>
              <span class="status-value primary">{{ statistics.userStatistics?.authRate || '0%' }}</span>
            </div>
            <div class="beauty-status-item">
              <span class="status-label">未认证</span>
              <span class="status-value">{{ (statistics.userStatistics?.totalUsers || 0) - (statistics.userStatistics?.authUsers || 0) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门项目TOP5 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card class="beauty-card" shadow="never">
          <template #header>
            <div class="beauty-card-header">
              <span class="beauty-card-title">热门项目TOP5</span>
            </div>
          </template>
          <el-table :data="statistics.topProjects" stripe class="beauty-table">
            <el-table-column type="index" label="排名" width="80" align="center">
              <template #default="{ $index }">
                <el-tag v-if="$index === 0" type="danger" effect="dark">{{ $index + 1 }}</el-tag>
                <el-tag v-else-if="$index === 1" type="warning" effect="dark">{{ $index + 1 }}</el-tag>
                <el-tag v-else-if="$index === 2" type="success" effect="dark">{{ $index + 1 }}</el-tag>
                <span v-else class="beauty-rank">{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="项目名称" min-width="200" />
            <el-table-column prop="category" label="分类" width="120" align="center">
              <template #default="{ row }">
                <el-tag v-if="row.category === 'face'" type="primary">面部</el-tag>
                <el-tag v-else-if="row.category === 'body'" type="success">身体</el-tag>
                <el-tag v-else-if="row.category === 'skin'" type="warning">皮肤</el-tag>
                <el-tag v-else>{{ row.category }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderCount" label="订单数" width="120" align="center" sortable />
            <el-table-column prop="totalAmount" label="交易金额" width="150" align="right">
              <template #default="{ row }">
                <span class="beauty-amount">{{ formatAmount(row.totalAmount) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单趋势 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card class="beauty-card" shadow="never">
          <template #header>
            <div class="beauty-card-header">
              <span class="beauty-card-title">订单趋势(近7天)</span>
            </div>
          </template>
          <div ref="chartRef" class="beauty-chart" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { User, Document, Money, WalletFilled } from '@element-plus/icons-vue';
import request from '@/utils/request';
import * as echarts from 'echarts';

const statistics = ref<any>({
  userStatistics: {},
  orderStatistics: {},
  amountStatistics: {},
  repaymentStatistics: {},
  topProjects: [],
  orderTrend: []
});

const chartRef = ref<HTMLElement>();
let chartInstance: any = null;

// 获取统计数据
const getStatistics = async () => {
  try {
    const res = await request({
      url: '/admin/beauty/dashboard/statistics',
      method: 'get'
    });
    if (res.code === 200) {
      statistics.value = res.data;
      // 渲染图表
      nextTick(() => {
        renderChart();
      });
    }
  } catch (error) {
    console.error('获取统计数据失败', error);
  }
};

// 格式化金额
const formatAmount = (amount: number) => {
  if (amount === null || amount === undefined) return '0';
  return (amount / 10000).toFixed(2) + '万';
};

// 渲染趋势图表
const renderChart = () => {
  if (!chartRef.value) return;

  // 初始化echarts实例
  if (chartInstance) {
    chartInstance.dispose();
  }
  chartInstance = echarts.init(chartRef.value);

  const dates = statistics.value.orderTrend?.map((item: any) => item.date) || [];
  const orderCounts = statistics.value.orderTrend?.map((item: any) => item.orderCount) || [];
  const amounts = statistics.value.orderTrend?.map((item: any) => (item.amount / 10000).toFixed(2)) || [];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['订单数', '交易额(万元)']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: [
      {
        type: 'value',
        name: '订单数',
        position: 'left'
      },
      {
        type: 'value',
        name: '交易额(万元)',
        position: 'right'
      }
    ],
    series: [
      {
        name: '订单数',
        type: 'line',
        smooth: true,
        data: orderCounts,
        itemStyle: {
          color: '#409eff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
          ])
        }
      },
      {
        name: '交易额(万元)',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        data: amounts,
        itemStyle: {
          color: '#67c23a'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }
          ])
        }
      }
    ]
  };

  chartInstance.setOption(option);

  // 自适应窗口大小
  window.addEventListener('resize', () => {
    chartInstance?.resize();
  });
};

onMounted(() => {
  getStatistics();
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/beauty.scss';

.beauty-statistics-row {
  margin-top: 0;
}

.beauty-statistics-card {
  margin-bottom: 20px;
  cursor: pointer;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.beauty-statistics-content {
  display: flex;
  align-items: center;
}

.beauty-statistics-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;

  &.user-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
  }

  &.success-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
  }

  &.warning-icon {
    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
    color: #fff;
  }

  &.danger-icon {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #fff;
  }
}

.beauty-statistics-data {
  flex: 1;
}

.beauty-statistics-value {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 8px;
}

.beauty-statistics-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.beauty-statistics-detail {
  font-size: 12px;
  color: #c0c4cc;
  display: flex;
  gap: 12px;
}

.beauty-status-list {
  padding: 10px 0;
}

.beauty-status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #ebeef5;

  &:last-child {
    border-bottom: none;
  }

  .status-label {
    font-size: 14px;
    color: #606266;
  }

  .status-value {
    font-size: 18px;
    font-weight: bold;
    color: #303133;

    &.primary {
      color: #409eff;
    }

    &.success {
      color: #67c23a;
    }

    &.warning {
      color: #e6a23c;
    }

    &.danger {
      color: #f56c6c;
    }
  }
}

.beauty-rank {
  font-size: 16px;
  font-weight: bold;
  color: #909399;
}

.beauty-chart {
  width: 100%;
}
</style>
